<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"
				></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<!--最上面的搜索内容-->
			<view class="distributed">
				<!-- 填写内容 -->
				<view class="custom-form-card">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{$t('distributedEnter.barcodeScan')}}
					</view>
					<view class="custom-card-scan">
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.scanValue"
							:placeholder="$t('stockManage.pleaseScanCode')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>
					
					<view class="custom-card-itemTwo">
						<text class="item-info-title">{{$t('finishInventory.checkStatus')}}</text>
						<view class="gui-form-body gui-text-right" style="overflow:visible;">
							<superweiCombox style="text-align:right;" :candidates="data.selectList" :placeholder="$t('distributedOut.placeholder')"
							:isJSON="true" keyName="name" @select="select" v-model="data.selectIdText" :defaultValue="$t('smashRemoval.all')"></superweiCombox>
						</view>
					</view>
					<view class="custom-card-itemTwo">
						<text class="item-info-title">{{$t('distributedEnter.materialCode')}}：</text>
						<comboGrid requestUrl="/mes/basMaterial/getPageSetPDA" v-model="data.materialCode"
							:requestParam="data.materialParam" inputKey="materialName"
							:placeholder="$t('distributedEnter.placeholderTextChoose')" gridPlaceholder="输入代码或者名称筛选"
							:column="data.columnName.column" bindValue="materialCode" @setClick="getMaterialClick">
						</comboGrid>
						<uni-icons class="iconDelete" type="close" v-if="data.materialCode" size="18" color="#999"
							@click="handelMaterialClear"></uni-icons>
					</view>
					<view class="custom-card-itemTwo" style="padding: 20rpx 0;">
						<text class="item-info-title" style="width:180rpx">{{$t('distributedOut.location')}}：</text>
						<storageBin :ignoreLocationCode="data.ignoreLocationCode" class="gui-text-right"
							requestUrl="/wms/wmsLocationCapacity/getLocationByWarehouseCodeForCCP" :requestParam="data.requestParam"
							:locationUseList="data.locationUseList" v-model="data.locationCode"
							@setClick="getLocationClick" style="width:100%"></storageBin>
						<uni-icons class="iconDelete" type="close" v-if="data.locationCode.length" size="18"
							color="#999" @click="handelClear"></uni-icons>
					</view>
				</view>
				<!--结果区-->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll"  @scrolltolower="scrolltolowerFn">
					<!--条码维度-->
					<view class="custom-form-card" v-for="(x,i) in data.barcodeData" :key="i">
						<uni-collapse v-model="data.value">
							<uni-collapse-item titleBorder="none" :show-animation="true" :name="''+i">
								<view class="content" style="margin-bottom: 20rpx;">
									<view class="card-mini-head">
										<view class="title-line"></view>
										<text>{{$t('translationImage.serialNumber')}}：{{i+1}}</text>
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-100">
											<text
												class="item-info-title">{{$t('distributedEnter.barcode')}}：</text>{{x.barcode}}
										</view>
									</view>
									<view class="custom-card-itemOne">

										<view class="card-item-50">

											<text
												class="item-info-title">{{$t('distributedEnter.materialCode')}}：</text>{{x.materialCode}}
										</view>
									</view>
									<view class="custom-card-itemOne">
										<text
											class="item-info-title">{{$t('distributedEnter.materialName')}}：</text>{{x.materialName}}
									</view>
									<view class="custom-card-itemOne">
										<text
											class="item-info-title">{{$t('distributedEnter.materialSpec')}}：</text>{{x.materialSpec}}
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50"><text
												class="item-info-title">{{$t('distributedEnter.qty')}}：</text>{{x.stockQty}}
										</view>
										<view class="card-item-50"><text
												class="item-info-title">{{$t('distributedEnter.uom')}}：</text>{{x.unit}}
										</view>
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50"><text
												class="item-info-title">{{$t('finishInventory.warehouseCode')}}：</text>{{x.warehouseCode}}
										</view>
										<view class="card-item-50"><text
												class="item-info-title">{{$t('finishInventory.locationCode')}}：</text>{{x.locationCode
}}
										</view>
									</view>
									<view class="custom-card-itemOne">
										<view class="card-item-50">
											<text class="item-info-title">{{$t('pageTranslation.chekStatus')}}：</text>
											<view class="btnSuccess" v-if="x.ckeckFlag=='Y'">{{$t('finishInventory.checked')}}</view>
											<view class="btnError" v-else>{{$t('finishInventory.unchecked')}}</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>

					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.barcodeData.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		navigate,
		navigateBack
	} from '@/utils/routerSkip.js';
	import {
		ref,
		reactive,
		toRaw,
		watch,
		computed,
		onMounted
	} from 'vue';
	import storageBin from '@/components/storageBin.vue';
	import comboGrid from "@/components/comboGrid";
	import superweiCombox from '@/components/superweiCombox';
	import {
		onShow,onLoad
	} from '@dcloudio/uni-app';

	import {
		TEST_URL,
		PROD_URL,
		IMG_BASE_URL
	} from '@/constant/config.js'
	import {
		TOKEN
	} from '@/constant/index.js';
	import {
		basPdaOperationLogFn
	} from '@/utils/index.js';
	import {
		OPERATION_COMMIT,
		OPERATION_SCAN
	} from '@/constant/index.js'
	import {
		getDataDictionaryFn,
		base64toFile
	} from '@/utils/index.js'
	//API引入
	import {
		selectWmsCheckStocked,
		getDetailInfo
	} from '@/api/api.js'
	//扫描条码的引入
	import pdaScan from '@/hooks/pdaScan.js'
	import {
		useStore
	} from "vuex";
	import {
		forEach
	} from '../../../uni_modules/u-ajax/js_sdk/lib/utils';

	//国际化引入
	import {
		useI18n
	} from 'vue-i18n';
	const {
		t
	} = useI18n();

	const {
		scan
	} = pdaScan()

	//注册组件
	components: {
		storageBin,
		comboGrid
	}

	let data = reactive({
		billid:'', //盘点单号id
		billCode: "", //上级界面传过来的billCode
		scanValue: '', //扫描信息
		materialId: '', //物料id
		materialCode: '', //物料编码
		locationCode: '', //库位code
		locationId: '', //库位id
		locationName: '', //库位名称
		ignoreLocationCode: [],
        noticeHooks:false,
		isLoading:false,
		isFinish: false,
		barcodeData: [], //条码维度返回的信息
		value: ['0'], //card的展开
		page: 1,
		rows: 20,
		//物料代码的传参
		materialParam: {
			text: '',
			materialCode: "",
			materialName: "", //物料代码,传给接口用的变量
		},
		// 库位的传参
		requestParam: {
			locationCode: "",
			warehouseCode: 'RM'
		},
		//物料代码的下拉选择器
		columnName: {
			column: [{
				label: t('distributedEnter.materialCode'),
				name: "materialCode",
			}, {
				label: t('distributedEnter.materialName'),
				name: "materialName",
			}]
		},
		// 库位的下拉选择器
		columnLocation: {
			column: [{
				label: t('JsInternational.volumnStockName'),
				name: "locationCode",
			}, {
				label: t('JsInternational.volumnStockOf'),
				name: "maxCapacity",
			}]
		},
		
		selectList: [{
			id: '',
			name: t('all')
		}, {
			id: 'Y',
			name: t('checked')
		}, {
			id: 'N',
			name: t('unchecked')
		}],// 校验状态数组
		
		selectIdText:'',
		selectId:''
	})
	
	onShow(()=>{
		data.page = 1
		data.rows = 20
		selectMaterial()
	})
	
	onMounted(() => {
		uni.$on('scancodedate', (data) => {
			console.log('获取到的code：' + data.code)
			getCode(data.code, 'pda')
		})
	})
	
	onLoad((options)=>{
		data.billCode=options.billCode
		data.billid=options.billid
	})
	
	
	// 校验状态的选择事件
	const select = (e) => {
		data.selectId = e.id;
		data.page=1
		data.rows=20
		selectMaterial()
	}

	// 用户调起相机扫码
	const iconClick = async (type) => {
		console.log(type)
		if (type === 'suffix') {
			let code = await scan()
			getCode(code, 'scan')
		}
	}
	// 用户点击键盘上搜索
	const confirm = () => {
		getCode(data.scanValue, 'keydown')
	}

	// 获取code，查询barcode信息
	const getCode = (code, type) => {
		let parmes = { //根据barcode查询物料详情
			barcode: data.scanValue,
			masterId: data.billid,
			locationCode: '',
			materialCode: ''
		}
		selectWmsCheckStocked(parmes).then(res => {
			try {
				let inputParameter = JSON.stringify(parmes)
				let returnParameter = JSON.stringify(res)
				let operationPicture = '成品盘点'
				let callInterface = res.rquestUrl
				let opertionParmes = {
					inputParameter,
					returnParameter,
					operationPicture,
					callInterface,
					responseCode: res.status, //返回状态
					errorMessage: res.message, //错误信息
					isPass: res.status == 200 ? 'Y' : 'N', //是否成功 Y N
					operationType: OPERATION_SCAN
				}
				basPdaOperationLogFn(opertionParmes)
			} catch (error) {}
			if (res.status == 200) {
				data.scanValue = code //扫描的条码
				data.page=1
				data.rows=20
				selectMaterial() // 去查询条码

			} else {
				uni.showToast({
					title: res.message,
					icon: "none"
				});
			}
		})
	}

	// 物料代码的选择
	const getMaterialClick = (x) => {
		data.materialId = x.id
		data.materialCode = x.materialCode;
		data.page=1
		data.rows=20
		selectMaterial()

	}

	//库位选择之后赋值给变量
	const getLocationClick = (x) => {
		data.locationId = x.id
		data.locationName = x.locationName;
		data.locationCode = x.locationCode;
		data.page=1
		data.rows=20
		selectMaterial()

	}

	//物料代码查询
	const selectMaterial = () => {
		getDetailInfo({ //根据物料代码查询物料详情
			barcode: data.scanValue,
			billCode: data.billCode,
			locationCode: data.locationCode,
			materialCode: data.materialCode,
			ckeckFlag:data.selectId,
			page:data.page,
			rows:data.rows
		}).then(res => {
			data.isLoading=false;			
			if (res.status == 200) {
				data.noticeHooks = false
				const rows = res.data?.rows||[];
				if(data.page==1){
					if (rows.length == 0) {
						data.noticeHooks = true
					}
					data.barcodeData = rows
				}else{
					data.barcodeData.push(...rows)
				}
				data.barcodeData?.forEach((item,index)=>{
					if(index!=0){
						data.value.push(''+index)
					}
				})
				data.noticeHooks = data.barcodeData.length >= res.data?.total||0
				data.isFinish = data.barcodeData.length >= res.data?.total||0;
			}
		})
	}



	const handelClear = () => {
		data.locationCode = ""
		data.locationName = ""
		data.locationId = null
		data.page=1
		data.rows=20
		selectMaterial()
	}

	const handelMaterialClear = () => {
		data.materialId = null
		data.materialCode = "";
		data.page=1
		data.rows=20
		selectMaterial()
	}
	
	// 下拉加载
	const scrolltolowerFn = () => {
		if (!data.noticeHooks ) {
			data.page++
			data.isLoading = true;
			selectMaterial()
		}
	}
</script>

<style lang="scss" scoped>
	// .card-my{
	// 	display: flex;
	// 	flex-direction: column;
	// }
	.addflex {
		display: flex;
		align-items: center;

		.itemflex {
			flex: 1;
		}
	}

	.distributed {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 200rpx);
		// height: 100vh;
	}

	.scroll {
		margin-top: 15rpx;
		flex: 1;
		height: 2rpx;
	}

	.page-bottom-box {
		position: fixed;
	}

	.addborder {
		border: 1rpx solid #DCDFE6;
		box-sizing: border-box;
		padding: 15rpx;
		margin-bottom: 15rpx;
		border-radius: 8rpx;
	}

	.input-dialog-itembox {
		padding: 15rpx;
		box-sizing: border-box;
		border: 1rpx solid #DCDFE6;
		margin-bottom: 15rpx;
		border-radius: 8rpx;
	}

	.input-dialog-item {
		font-size: 24rpx;
	}

	.input,
	.textarea {
		font-size: 24rpx;
	}

	.iconDelete {
		margin-top: 20rpx;
		height: 100%;
		width: 40rpx;
	}

	.item-info-title {
		margin-left: 10px;
	}


	.btnSuccess {
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #fff;
		background-color: #007aff;
		display: inline-block;
		text-align: center;
		border-radius: 10rpx;
	}

	.btnError {
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #fff;
		background-color: red;
		display: inline-block;
		text-align: center;
		border-radius: 10rpx;
	}


	.btnCancel {
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #fff;
		background-color: #f08d49;
		display: inline-block;
		text-align: center;
		border-radius: 10rpx;
	}

	.btnPanDian {
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #fff;
		background-color: #42b983;
		display: inline-block;
		text-align: center;
		border-radius: 10rpx;
	}

	.flexRight {

		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	
	.card-mini-head{display: flex;}
</style>
